<template>
  <!--
      	作者：joey
      	时间：2024-03-20
      	描述：商品角标
      -->
    <div>
        <!--搜索表单-->
        <div class="common-seach-wrap">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="已通过" name="1">
              <span slot="label">
                已通过
                <el-tag size="mini">{{ category_count.using }}</el-tag>
              </span>
            </el-tab-pane>
            <el-tab-pane label="待审核" name="0">
              <span slot="label">
                待审核
                <el-tag size="mini">{{ category_count.audit }}</el-tag>
              </span>
            </el-tab-pane>
            <el-tab-pane label="未通过" name="2">
              <span slot="label">
                未通过
                <el-tag size="mini">{{ category_count.no_pass }}</el-tag>
              </span>
            </el-tab-pane>
          </el-tabs>

          <el-form
            size="small"
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="请输入标签名称">
              <el-input
                v-model="formInline.label_name"
                placeholder="请输入标签名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="formInline.create_time"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <div class="mb16">
              <div class="common-level-rail fl">
                  <el-button size="small" type="primary" icon="el-icon-plus" @click="addMark">添加角标</el-button>
              </div>
          </div>
        </div>
        <div class="table-wrap">
            <el-table :data="categoryData" style="width: 100%" v-loading="loading">
              <el-table-column prop="name" label="角标名称"></el-table-column>
              <el-table-column prop="" label="图片">
                <template slot-scope="scope">
                  <img v-img-url="scope.row.icon" alt="" width="50px" />
                </template>
              </el-table-column>
              <el-table-column prop="describe" label="角标描述"></el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0" class="gray">隐藏</span>
                  <span v-if="scope.row.status == 1" class="red">显示</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="sort"
                label="排序号"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="create_time"
                label="添加时间"
                width="180"
              ></el-table-column>
              <el-table-column prop="audit_status" label="审核状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.audit_status==0" style="color:#C0C4CC">未审核</span>
                  <span v-else-if="scope.row.audit_status==1" style="color:green">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    @click="editMark(scope.row)"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    @click="deleteMark(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--添加-->
            <Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>

            <!--编辑-->
            <Edit v-if="open_edit" :open_edit="open_edit" :editform="userModel"
                  @closeDialog="closeDialogFunc($event, 'edit')"></Edit>

        <!--分页-->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                       :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                       :total="totalDataNumber"></el-pagination>
        </div>

        </div>
    </div>
</template>

<script>
    import MarkApi from '@/api/productMark.js';
    import Edit from './part/Edit.vue';
    import Add from './part/Add.vue';
    import {deepClone} from '@/utils/base.js';
    export default {
        components: {
            /*编辑组件*/
            Edit,
            Add
        },
        data() {
            return {
                /*分类*/
                categoryData: [],
                /*是否打开添加弹窗*/
                open_add: false,
                /*是否打开编辑弹窗*/
                open_edit: false,
                /*当前编辑的对象*/
                userModel: {},
                commentData: [],
                /*是否加载完成*/
                loading: true,
                /*横向表单数据模型*/
                formInline: {
                    name: '',
                },
                /*列表数据*/
                tableData: [],
                /*一页多少条*/
                pageSize: 20,
                /*一共多少条数据*/
                totalDataNumber: 0,
                /*当前是第几页*/
                curPage: 1,
                /*切换菜单*/
                activeName: "1",
                /*分类统计*/
                category_count: {}
            }
        },
        created() {
          const audit_status = this.$route.query.audit_status;
          this.activeName = audit_status?audit_status:this.activeName ;
           
          /*获取文章列表*/
          this.getTableList();

        },
        methods: {
           /*获取列表*/
           getTableList() {
                let self = this;
                let Params = self.formInline;
                Params.page = self.curPage;
                Params.list_rows = self.pageSize;
                Params.audit_status = self.activeName;
                MarkApi.MarkList(Params, true)
                    .then(data => {
                        self.loading = false;
                        self.categoryData = data.data.list.data;
                        self.totalDataNumber = data.data.list.total;
                        self.category_count = data.data.category_count;
                    })
                    .catch(error => {
                        self.loading = false;
                    });
            },

            /*删除*/
            deleteMark(row) {
                let self = this;
                self.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() =>
                {
                    self.loading = true;
                    MarkApi.deleteMark({
                        id: row.id
                    }, true)
                        .then(data =>
                        {
                            self.loading = false;
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.getTableList();

                        })
                        .catch(error =>
                        {
                            self.loading = false;
                        });

                }).catch(() =>
                {

                });
            },

            /*打开添加*/
            addMark() {
                this.open_add = true;
            },

            /*打开编辑*/
            editMark(item) {
                this.userModel = deepClone(item);
                this.open_edit = true;
            },

            /*关闭弹窗*/
            closeDialogFunc(e, f) {
                if (f == 'add') {
                    this.open_add = e.openDialog;
                    if (e.type == 'success') {
                        this.getTableList();
                    }
                }
                if (f == 'edit') {
                    this.open_edit = e.openDialog;
                    if (e.type == 'success') {
                        this.getTableList();
                    }
                }
            },
            /*选择第几页*/
            handleCurrentChange(val) {
                let self = this;
                self.curPage = val;
                self.loading = true;
                self.getTableList();
            },

            /*每页多少条*/
            handleSizeChange(val) {
                this.curPage = 1;
                this.pageSize = val;
                this.getTableList();
            },

            /*搜索查询*/
            onSubmit() {
                let self = this;
                self.loading = true;
                let Params = self.formInline;
                self.getTableList();
            },
            /*切换菜单*/
            handleClick(tab, event) {
              let self = this;
              self.curPage = 1;
              self.loading = true;
              self.getTableList();
            }
        }
    }
</script>

<style>
</style>
